<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
    Vue路由
    1、<router-link> 这个元素就相当于一个a标签，点击后会被Vue处理，其中的to属性是需要路由的地址
    2、<router-view> 这个是路由占位符，点击<router-link>后，匹配的组件会在它所在的位置进行显示
    3、路由规则path指定匹配的路由地址；component在匹配后返回的组件
   -->
  <script src="lib/vue.js"></script>
  <script src="lib/vue-router_3.0.2.js"></script>
  <div id="app">
    <!-- 路由链接，本质上是一个超链接，使用#锚点，防止页面跳转 -->
    <router-link to="/user">用户</router-link>
    <router-link to="/registry">注册</router-link>
    <!-- 路由占位符，显示被路由到的组件 -->
    <router-view></router-view>
  </div>

  <script>
    const User = {
      template: `<div>用户中心</div>`
    }
    const Registry = {
      template: `<div>用户注册</div>`
    }

    const router = new VueRouter({
      // 路由规则，配置路径和组件的映射关系
      routes: [
        // path绑定对应路径，component则是在这个路径上显示这个组件
        { path: '/user', component: User },
        { path: '/registry', component: Registry },
        // 路由重定向，访问首页默认定位到用户
        { path: '/', redirect: '/user' }
      ]
    })

    const app = new Vue({
      el: "#app",
      data:{},
      methods:{},
      // ES6里面，属性名和属性值相同可以就写一个
      //router: router
      router
    })
  </script>
</body>

</html>